/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-30 13:36:23
 */
import React, { useState, useEffect } from "react";
import { Tabs } from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import { CmdbContent, HcpTipModal } from "@/components";

const FieldDetail = ({ info, fieldType, visible, setVisible,setShowEditField }) => {
    const [field, setField] = useState({});
    const [columns, setColumns] = useState([]);

    const getColumns = (item) => {
        const _columns = [
            {
                title: "字段名称",
                key: "propertyName",
                dataIndex: "propertyName",
            },
            {
                title: "唯一标识",
                key: "propertyKey",
                dataIndex: "propertyKey",
            },
            {
                title: "字段类型",
                key: "propertyTypeName",
                dataIndex: "propertyTypeName",
                valueEnum: {
                    "string": "字符",
                    "enum": "枚举",
                    "number": "数字"
                }
            },
            {
                title: "是否可编辑",
                key: "woIsEdit",
                dataIndex: "woIsEdit",
                valueType: 'radio',
                valueEnum: {
                    0: "不可编辑",
                    1: "可编辑"
                }
            },
            {
                title: "是否必填",
                key: "woIsRequired",
                dataIndex: "woIsRequired",
                valueType: 'radio',
                valueEnum: {
                    0: "非必填",
                    1: "必填"
                }
            }
        ];
        if(item?.propertyType == "number") {
            _columns.push({
                title: "单位",
                key: "unit",
                dataIndex: "unit",
            });
        }
        _columns.push({
            title: "用户提示",
            key: "description",
            dataIndex: "description",
        })
        if(item?.propertyType == "enum") {
            _columns.push({
                title: "枚举值",
                key: "useNum",
                dataIndex: "useNum",
                render: (_, record)=> {
                    let arr = [];
                    if(record && record.propertyEnumValue) {
                        const enumValueArr =  Object.entries(JSON.parse(record.propertyEnumValue.replace(/'/g,"\"")));
                        for(let item of enumValueArr) {
                            let enumValueObj = {
                                key: item[0],
                                value: item[1]
                            };
    
                            arr.push(enumValueObj);
                        }
                    }
                    return arr.length ? 
                    <div> 
                    {
                        arr.map((item, index)=> {
                            return (
                                <p key={index}>{item.value}({item.key})</p>
                            )
                        })
                    }  
                    </div>
                    : '-'
                }
            })
        }
        return _columns;
    }

    useEffect(() => {
        if(fieldType && visible) {
            info['propertyTypeName'] = fieldType[info?.propertyType] || info?.propertyType;
            setColumns(getColumns(info));
            setField(info);
        }
    }, [fieldType, visible])

    return (
        <HcpTipModal
            title="字段详情"
            visible={visible}
            onCancel={() => { setVisible(false) }}
            onFinish={() => { setVisible(false); setShowEditField(true) }}
            okText="编辑"
            content={
                <>
                    <ProDescriptions
                        column={2}
                        dataSource={field}
                        columns={columns}
                        style={{padding: "20px"}}
                    >
                    </ProDescriptions>
                </>
            }
        />
    )
}

export default FieldDetail;